<template>
  <div>
    <bread-crumb :title="'编辑分配短信'" @toggle="goBack"></bread-crumb>
    <!-- 表ge -->
    <el-table
      :data="tableData"
      :header-cell-style="headerCellStyle"
      style="width: 100%"
    >
      <el-table-column
        prop="name"
        label="添加设置"
        width="160"
      ></el-table-column>
      <el-table-column prop="num">
        <template slot-scope="scope">
          <div class="primary-color">
            <span>{{ scope.row.num }}</span>
            <span v-if="scope.row.num >= 0">条</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column header-align="right" align="right">
        <template slot-scope="scope">
          <span class="edit-style" @click="operate(scope.row.id)">
            {{ scope.row.editText }}
          </span>
        </template>
      </el-table-column>
    </el-table>

    <el-table
      :data="tipTableData"
      :header-cell-style="headerCellStyle"
      style="width: 100%;margin-top:30px;"
    >
      <el-table-column
        prop="name"
        label="提示设置"
        width="160"
      ></el-table-column>
      <el-table-column prop="num">
        <template slot-scope="scope">
          <div>
            <span>{{ scope.row.num }}</span>
            <span v-if="scope.row.num >= 0">天</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column>
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.open"
            active-color="#3296fa"
            inactive-color="#e8e9eb"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column header-align="right" align="right">
        <template slot-scope="scope">
          <span class="edit-style" @click="operate(scope.row.id)">
            发送设置
          </span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹窗 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="45%"
      @close="closeDialog"
    >
      <div>
        <div v-if="showBuySignLink" class="buy-sign-link primary-color">
          <span @click="buySign">购买签名</span>
        </div>
        <el-input
          v-model="msg_num"
          placeholder="请输入分配条数"
          v-if="dialogTitle === '分配条数'"
        ></el-input>
        <el-select
          v-model="msg_sign"
          placeholder="请选择短信签名"
          style="width:100%"
          v-if="showBuySignLink"
        >
          <el-option
            v-for="item in signOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import breadCrumb from "./bread-crumb.vue";
export default {
  components: {
    breadCrumb
  },
  data() {
    return {
      msgNum: 199,
      headerCellStyle: {
        background: "#f7f8fa",
        height: "40px"
      },
      tableData: [
        {
          name: "短信条数",
          num: 0,
          editText: "分配短信",
          id: 0
        },
        {
          name: "短信签名",
          editText: "修改签名",
          id: 1
        }
      ],
      tipTableData: [
        {
          name: "用户过期提醒",
          num: 1,
          id: 11
        },
        {
          name: "平台过期提醒",
          num: 1,
          id: 22
        },
        {
          name: "用户过期提醒",
          num: 3000,
          id: 33
        }
      ],
      dialogTitle: "",
      dialogVisible: false,
      showBuySignLink: false,
      msg_num: 0,
      signOptions: [
        {
          value: "0",
          label: "微擎"
        }
      ],
      msg_sign: ""
    };
  },
  methods: {
    buySign() {
      window.open("https://market.w7.cc/detail?id=2373&type=20", "_blank");
    },
    goBack() {
      this.$emit("toggle", "edit");
    },
    operate(id) {
      this.dialogVisible = true;
      if (id === 0) {
        console.log(id);
        this.dialogTitle = "分配条数";
      } else if (id === 1) {
        console.log(id);
        this.dialogTitle = "选择短信签名";
        this.showBuySignLink = true;
      } else if (id === 11) {
        console.log(id);
        this.dialogTitle = "选择短信签名";
        this.showBuySignLink = true;
      } else if (id === 22) {
        console.log(id);
        this.dialogTitle = "选择短信签名";
        this.showBuySignLink = true;
      } else if (id === 33) {
        console.log(id);
        this.dialogTitle = "选择短信签名";
        this.showBuySignLink = true;
      }
    },
    closeDialog() {
      this.showBuySignLink = false;
      this.dialogTitle = "";
    }
  }
};
</script>

<style lang="scss" scoped>
.edit-style {
  color: #3296fa;
  cursor: pointer;
}
.buy-sign-link {
  display: flex;
  justify-content: flex-end;
  height: 40px;
  line-height: 40px;
  span {
    cursor: pointer;
  }
}
</style>
